<template>
  <div class="h-[85px] flex items-center justify-between">
    <div class="text-[24px]">{{ label }}</div>
    <div>
      <el-input
        v-model="str"
        clearable
        class="w-[400px]"
        placeholder="请输入"
        @change="handleChange"
      >
        <i slot="suffix" class="el-input__icon el-icon-search text-primary font-semibold"></i>
      </el-input>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {},
  props: {
    label: {
      type: String,
      default: '页面标题',
    },
    searchStr: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      str: '',
    }
  },
  methods: {
    handleChange(val) {
      this.$emit('update:searchStr', val)
    },
  },
})
</script>
<style lang="scss" scoped></style>
